<!--
  @author:  long
  @date:    2023/3/6
  @file:   新建任务
  @require:
-->
<template>
  <div class="addTask px-10 overflow-auto h-100">
    <el-form :model="form">
      <el-form-item label="任务标题">
        <el-input v-model="form.taskTitle" placeholder="任务标题"></el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          style="width: 100%"
          v-model="form.startTime"
          type="date"
          placeholder="选择开始时间"
        />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          style="width: 100%"
          v-model="form.endTime"
          type="date"
          placeholder="选择结束时间"
        />
      </el-form-item>
      <el-form-item label="关联项目">
        <el-select class="w-full" v-model="form.project" placeholder="选择项目">
          <el-option label="123" value="123" />
        </el-select>
      </el-form-item>
      <el-form-item label="负责人员">
        <el-select
          v-model="form.fzr"
          placeholder="请选择负责人员"
          @focus="fzrInputFocus"
          multiple
          class="w-full"
        >
          <el-option
            v-for="(item, index) in selectOptionObj['fzr']"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="参与人员">
        <el-select
          v-model="form.cyry"
          placeholder="请选择参与人员"
          @focus="cyryInputFocus"
          multiple
          class="w-full"
        >
          <el-option
            v-for="(item, index) in selectOptionObj['cyry']"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="紧要程度">
        <el-radio-group v-model="form.jycd">
          <el-radio-button label="重要" />
          <el-radio-button type="danger" label="紧急" />
          <el-radio-button label="普通" />
          <el-radio-button label="较低" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="提醒方式">
        <el-checkbox-group v-model="form.txfs">
          <el-checkbox
            v-for="(dict, index) in reminder_method"
            :key="index"
            :label="dict.value"
          >
            {{ dict.label }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="任务描述">
        <el-input
          v-model="form.rwms"
          :rows="5"
          maxlength="200"
          show-word-limit
          type="textarea"
          placeholder="输入内容"
        />
      </el-form-item>
      <el-form-item label="上传附件">
        <el-upload
          v-model="form.file"
          class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="3"
          :on-exceed="handleExceed"
        >
          <el-button type="primary" icon="UploadFilled">上传文件</el-button>
          <template #tip>
            <div class="el-upload__tip">
              支持格式:.rar .zip .doc .docx .pdf,单个文件不能超过20MB
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <!--  弹窗选择组件  -->
    <SelectDialog :dialog-param="dialogParam" @ok="selectData"></SelectDialog>
  </div>
</template>

<!--新建任务-->
<script setup name="AddTask">
import SelectDialog from '@/components/SelectDialog/index.vue'
import { reminder_method } from '@/hooks/dict/useProject'
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

const data = reactive({
  form: {},
  dialogParam: {}, //弹窗组件配置
  selectOptionObj: {} // selectTree数据
})
const { form, dialogParam, selectOptionObj } = toRefs(data)

/**
 * 弹窗选取获取选中的值
 * @param val
 *  type 业务类型
 *     selectData 选中的数据[{value: 1, label: '王晓易', $treeNodeId: 2}]
 *     labelData 选中的数据label ['王晓易']
 *     defaultCheckedKeys 选中的数据id [1]
 *     dialogVisible: false 弹出框的关闭
 */
function selectData(val) {
  console.info('val', val)
  if (!val.selectData.length) {
    form.value[val.type] = ''
  } else {
    selectOptionObj.value[val.type] = val.selectData
    form.value[val.type] = val.defaultCheckedKeys
  }
}

/**
 * 负责人员获取焦点事件
 */
function fzrInputFocus() {
  dialogParam.value = {
    type: 'ssqy',
    title: '选择负责人员',
    multiple: false,
    data: [
      {
        value: 0,
        label: '省局',
        children: [
          {
            value: 1,
            label: '王晓易'
          },
          {
            value: 2,
            label: '易烊千玺'
          },
          {
            value: 3,
            label: '赵丽颖'
          },
          {
            value: 4,
            label: '王一博'
          }
        ]
      },
      {
        value: 14,
        label: '总公司',
        children: [
          {
            value: 5,
            label: '欧阳娜娜'
          },
          {
            value: 6,
            label: '肖战'
          }
        ]
      }
    ]
  }
  selectOptionObj.value['fzr'] = []
  if (form.value['fzr'] && form.value['fzr'].length) {
    dialogParam.value.isDialog = true
    dialogParam.value.defaultCheckedKeys = form.value['fzr']
  } else {
    dialogParam.value.isDialog = true
    dialogParam.value.defaultCheckedKeys = []
  }
}

/**
 * 参与人员获取焦点事件
 */
function cyryInputFocus() {
  dialogParam.value = {
    type: 'cyry',
    title: '选择参与人员',
    multiple: true,
    data: [
      {
        value: 0,
        label: '省局',
        children: [
          {
            value: 1,
            label: '王晓易'
          },
          {
            value: 2,
            label: '易烊千玺'
          },
          {
            value: 3,
            label: '赵丽颖'
          },
          {
            value: 4,
            label: '王一博'
          }
        ]
      },
      {
        value: 14,
        label: '总公司',
        children: [
          {
            value: 5,
            label: '欧阳娜娜'
          },
          {
            value: 6,
            label: '肖战'
          }
        ]
      }
    ]
  }
  selectOptionObj.value['cyry'] = []
  if (form.value['cyry'] && form.value['cyry'].length) {
    dialogParam.value.isDialog = true
    dialogParam.value.defaultCheckedKeys = form.value['cyry']
  } else {
    dialogParam.value.isDialog = true
    dialogParam.value.defaultCheckedKeys = []
  }
}
</script>

<style scoped lang="scss"></style>
